<template>
  <div class="Navbar">
    <div v-if="!user.isLogin">
      <el-button round @click="login">登录</el-button>
    </div>
    <div v-else>
      <el-button v-if="page_type._a" type="text" @click="home">首页</el-button>
      <el-button v-if="page_type._b" type="text" @click="pj">新闻评价接口</el-button>
      <el-dropdown style="margin-left: 10px" trigger="click" @command="dd">
        <el-button circle icon="el-icon-arrow-down"/>
        <el-dropdown-menu slot="dropdown" style="text-align: center">
          <div style="text-align: center; margin-top: 10%; margin-bottom: 20%">
            <span>{{ user.userName }}</span>
          </div>
          <el-dropdown-item v-if="user.isAdmin" command="backend">管理后台</el-dropdown-item>
          <el-dropdown-item command="change_password">修改密码</el-dropdown-item>
          <el-dropdown-item command="logout">登出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  let _c = require('~/assets/config');

  export default {
    name: "Navbar",
    props: {
      user: {
        type: Object,
        required: true
      },
      page_type: {
        type: Object,
        required: true
      }
    },
    methods: {
      login: function () {
        this.$router.push({path:'/login'});
      },
      dd: function (c) {
        if (c === 'logout') {
          this.logout();
        } else if (c === 'backend') {
          this.backend();
        } else if (c === 'change_password') {
          this.change_password();
        }
      },
      logout: function () {
        let _h = _c.API_HOST;
        axios.defaults.withCredentials = true;
        let _v = this;
        axios.get(`${_h}/user/logout`).then((res) => {
          _v.$router.go(0);
        })
      },
      pj: function () {
        this.$router.push({path:'/pj'});
      },
      home: function () {
        this.$router.push({path:'/'});
      },
      backend: function () {
        this.$router.push({path:'/backend'});
      },
      change_password: function () {
        this.$router.push({path:'/change_password'});
      }
    }
  }
</script>

<style scoped>
  .Navbar {
    margin-top: 0.8%;
  }
</style>
